<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>APP后台管理系统</title>
	<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
	<style type="text/css">
		html,body{
			height:100%;
			padding: 0px;
			margin: 0px;
		}
		/*aside*/
		aside{
			width: 20%;
			display: inline-block;
			background-color: #4682B4;
			height:100%;
			text-align: center;color: white;
		}
		aside img{
			margin-top: 10px;
			height: 80px;
			width: 80px;
		}
		aside #mes{
			width: 80px;
			display: inline-block;
		}
		aside #mes span{
			display: block;
		}
		aside #drop-list{
			display: inline-block;
			text-align: left;
		}
		aside a{
			display: inline-block;
			color: white;
			margin-bottom: 10px;
		}

		/*	right-div */
		#right-div{
			float: right;
			width: 80%;
			display: inline-block;
			background-color: #F2F4F4 ;
		}
		/*下拉表单*/
		#right-div #drop-nav{
			padding-top: 10px;
			padding-bottom: 20px;
			height: 50px;
			background-color:#F9F9F9;
			border: 1px #DDDDDD;
		}
		#right-div #drop-nav img{
			float: right;
			height: 35px;
			margin-right: 5px; 

		}
		#right-div #drop-nav a{
			float: right;
			margin-right: 20px;
			width: 70px;
		}

		/*pannerl查询表单*/
		#right-div #pannel-list{
			margin:10px;
		}
		#right-div .list-item{
			display: inline-block;
			width: 250px;
			height: 40px;
			margin: 10px;
		}
		#right-div .list-item span{
			display: inline-block;
			margin-left: 20px;
			margin-right: 10px;
			font-weight: bold;
		}
		#right-div .list-item input,#right-div .list-item select{
			display: inline-block;
			width: 150px;
		}
		#right-div #pannel-list button{
			margin-left: 20px;
		}

		/*table*/
		#right-div #table-list{
			margin:10px;
			padding: 10px;
			background-color: white;
			padding-bottom: 40px;
		}

		
		#right-div #table-list > button{
			float: right;
		}
		#right-div #table-list table{
			text-align: center;
		}
		#right-div #table-list table button{
			height: 30px;
		}
		
		/*	footer */
		#right-div #footer{
			background-color: white;
			height: 40px;
		}
		#right-div #footer p{
			margin-top: 10px;
			float: right;
			margin-right: 20px;
		}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<aside>
		<h2>APP BMS</h2>
		
		<!-- 个人信息显示 -->
		<div>
			<img src="../../img/head.png" />
			<div id="mes">
				<span>Welcome.</span>
				<span>User_robot1</span>
			</div>
			<p>开发者</p>
		</div>
		<hr class="simple" color="#6f5499" />		
		
		<!-- 下拉列表 -->
		<div id="drop-list">
			<h3>APP账户管理</h3>
			<a href="msg_manager.html?pageNum=1">APP列表</a><br/>
			<h3>APP应用管理</h3>
			<a href="add_msg.html">新增APP基础信息</a><br/>
		</div>
		<!-- 底栏菜单项 -->

	</aside>


	<!-- right col-md-10 -->
	<div id="right-div">
		
		<!-- 下拉导航 -->
		 <div id="drop-nav">
		 	<a class="btn btn-danger" href="login.html">退出</a>
		 	<img src="../../img/head.png" />
		 </div>

		<!-- 查询表格 -->
		<form class="panel panel-default" id="searchInfo">
		  <div class="panel-body">
		  	<h4>APP 信息管理维护</h4>
		  	<p>测试账号-您可以通过搜索或其他的筛选项对APP的信息进行维护操作——^_^</p>
		  	<hr class="simple" color="#6f5499" />	
		  	<div class="list-item">
		  		<span>软件名称</span>
		  		<input class="form-control" type="text" name="appName" v-model="softName"/>
		  	</div>
			  <div class="list-item">
				  <span>App状态</span>
				  <select id="appStatus" class="form-control" name="appStatus" v-model="selectStatus">
					  <option v-for="status in statusList" >
						  {{status}}
					  </option>
				  </select>
			  </div>
		  	<div class="list-item">
		  		<span>所属平台</span>
		  		<select id="platformName" class="form-control" name="platformName" v-model="platformSelect">
					<option v-for="platform in platFormList" >
						{{platform}}
					</option>
				</select>
		  	</div>
		  	<div class="list-item">
		  		<span>一级分类</span>
		  		<select id="categoryLevel1" class="form-control" v-model="levelOne" name="categoryLevel1">
					<option>---请选择---</option>
					<option v-for="level1 in categoryOneList">
						{{level1}}
					</option>
				</select>
		  	</div>
		  	<div class="list-item">
		  		<span>二级分类</span>
		  		<select id="categoryLevel2" class="form-control" v-model="levelTwo" name="categoryLevel2">
					<option>---请选择---</option>
					<option v-for="level2 in categoryTwoList">
						{{level2}}
					</option>
				</select>
		  	</div>
		  	<div class="list-item">
		  		<span>三级分类</span>
		  		<select id="categoryLevel3" class="form-control" v-model="levelThree" name="categoryLevel3">
					<option>---请选择---</option>
					<option v-for="level3 in categoryThreeList">
						{{level3}}
					</option>
				</select>
		  	</div>
		  	<input class="btn btn-primary" id="searchApp" value="查 询" @click="searchByInfo()"></input>
		  </div>
		</form>


		<!-- 表格 -->
		<div id="table-list">
			<a href="add_msg.html" class="btn btn-success" style="float: left;margin-bottom: 11px;">新增APP基础信息</a>

	            <table class="table table-striped table-bordered">
	              <thead>
	                <tr>
	                  <th>软件名称</th>
	                  <th>APK名称</th>
	                  <th>软件大小(单位：MB)</th>
	                  <th>所属平台</th>
	                  <th>所属分类（一级分类、二级分类、三级分类）</th>
	                  <th>状态</th>
	                  <th>下载次数</th>
					  <th>最新版本号</th>
	                  <th>操作</th>
	                </tr>
	              </thead>
	              
	              <tbody>
	                <tr v-for="appInfo in appInfoList">
	                  <td>{{appInfo.softwareName}}</td>
	                  <td>{{appInfo.apkName}}</td>
	                  <td>{{appInfo.softwareSize}}</td>
	                  <td>{{appInfo.platformName}}</td>
	                  <td>{{appInfo.categoryLevel1}}->{{appInfo.categoryLevel2}}->{{appInfo.categoryLevel3}}</td>
	                  <td>{{appInfo.status}}</td>
	                  <td>{{appInfo.downloads}}</td>
					  <td>{{appInfo.versionNo}}</td>
	                  <td>
	                  	<!-- 下拉按钮 -->
						<div class="btn-group">
						  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						    点击选择 <span class="caret"></span>
						  </button>
						  <ul class="dropdown-menu" >
						    <li><a href="" @click.prevent="updateAppStatus(appInfo.id, 4)">上架</a></li>
						    <li><a href="" @click.prevent="updateAppStatus(appInfo.id, 5)">下架</a></li>
						    <li><a :href="'modify_msg.html?id='+appInfo.id">修改</a></li>
						    <li><a :href="'check_msg.html?appId='+appInfo.id">查看</a></li>
						    <li><a :href="'add_version_msg.html?appId='+appInfo.id">新增版本</a></li>
						    <li><a href="" @click.prevent="deleteApp(appInfo.id)">删除</a></li>
						  </ul>
						</div>
	                  </td>
	                </tr>
	              </tbody>
	            </table>

	            <span>共{{totalNum}}条记录 {{pageNum}}/{{parseInt(totalNum/5)+1}}页</span>

			<a class="btn btn-default" :href="'msg_manager.html?pageNum='+PrePage">上一页</a>
			<a class="btn btn-default" style="margin-left: 5px;margin-right: 10px;" :href="'msg_manager.html?pageNum='+NextPage">下一页</a>
		</div>
		
		<div id="footer"><p>@2020 All Rights Reserved</p></div>
	</div>

	<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../js/msgManager.js"></script>

</body>
</html>